<template>
  <div class="login">
    <van-nav-bar title="登录">
      <template #left>
        <van-icon class="iconfont iconguanbi" />
      </template>
    </van-nav-bar>
    <!-- 登录框 -->
    <van-form ref="loginFrom" @submit="onSubmit">
      <van-field
        v-model="userFrom.mobile"
        name="mobile"
        placeholder="请输入手机号码"
        type="number"
        :rules="userFormRules.mobile"
        maxlength="11"
        clearable
      >
        <van-icon slot="left-icon" class-prefix="iconfont iconshouji" />
      </van-field>
      <van-field
        v-model="userFrom.code"
        center
        clearable
        name="code"
        placeholder="请输入短信验证码"
        type="number"
        :rules="userFormRules.code"
        maxlength="6"
      >
        <van-icon slot="left-icon" class-prefix="iconfont iconyanzhengma" />
        <template #button>
          <van-count-down
            v-if="isCountDownShow"
            @finish="finishCountDown"
            :time="60 * 1000"
            format="ss秒"
          />
          <van-button
            v-else
            native-type="button"
            class="code-btn"
            size="small"
            round
            type="primary"
            @click="sendCode"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button block class="submit-btn" type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, smsCodes } from "@/api/user.js";
import asyncErrorHandler from "@/utils/asyncErrorHandler.js";
export default {
  name: "Login",
  data() {
    //
    return {
      isCountDownShow: false,
      userFrom: {
        mobile: "13911111111", //手机号
        code: "246810", // 验证码
      },
      userFormRules: {
        mobile: [
          { required: true, message: "请填写手机号码" },
          { pattern: /^1[3|5|7|8]\d{9}$/, message: "手机号码格式错误" },
        ],
        code: [
          { required: true, message: "请填写验证码" },
          { pattern: /^\d{6}$/, message: "验证码格式错误" },
        ],
      },
    };
  },
  methods: {
    async onSubmit() {
      // 封装了一个状态的函数 如果需要使用.就 const [err, res] = await asyncErrorHandler(请求函数名(参数))
      const [err, res] = await asyncErrorHandler(login(this.userFrom));
      console.log(err, res);

      // // 1.获取表单数据
      // const userFrom = this.userFrom;
      // // 3.提交表单请求登录
      // this.$toast.loading({
      //   message: "加载中...",
      //   forbidClick: true,
      // });
      // try {
      //   const res = await login(userFrom);
      //   this.$toast.success('登录成功')
      // } catch (err) {
      //     this.$toast.fail('登录失败')
      // }
      // 2. 表单验证
      // 4.根据请求响应结果处理后续操作
    },
    async sendCode() {
      try {
        await this.$refs.loginFrom.validate("mobile");
      } catch (err) {
        return this.$toast.fail("手机号输入错误");
      }
      this.isCountDownShow = true;
      try {
        await smsCodes(this.userFrom.mobile);
      } catch (err) {
        if (err.response.status === 429) {
          this.$toast.fail("接口访问次数受限");
        } else {
          this.$toast.fail("发送验证码失败");
        }
        this.isCountDownShow = false;
      }
    },
    finishCountDown() {
      this.isCountDownShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar {
    background-color: #3296fa;
    .van-icon {
      color: #fff;
    }
  }
}

.van-field .iconfont {
  font-size: 36px;
}
.code-btn {
  background-color: #ccc;
  border: none;
  padding: 15px 20px;
}
.submit-btn {
  opacity: 0.6;
}
</style>
